<script lang="tsx">
// 项目类型
const typeMapper = {
  [CourseItemType.VIDEO]: "视频",
  [CourseItemType.ARTICLE]: "图文",
  [CourseItemType.QUESTION]: "题目",
  [CourseItemType.LIVE]: "直播",
  [CourseItemType.TRAIN]: "知识训练",
  [CourseItemType.EXAM]: "模考",
};
</script>

<script lang="tsx" setup>
import ItemDetailInfo from "./item-detail-info.vue";
import { CourseItem, CourseItemType, CourseItemDetail, CourseQuestionSet } from "@/types/course";

const props = defineProps<{
  prefix?: string;
  item: CourseItem;
  active: boolean;
  itemDetail: CourseItemDetail;
  purchased: boolean;
  isDoing: boolean;
}>();
const emit = defineEmits<{
  (e: "buy"): void;
}>();

const { item, purchased, isDoing } = props;

// item类型对应的进度文本描述
const itemType2ActionStrMap = {
  [CourseItemType.VIDEO]: "看到",
  [CourseItemType.ARTICLE]: "学到",
  [CourseItemType.QUESTION]: "做到",
  [CourseItemType.LIVE]: "",
  [CourseItemType.TRAIN]: "",
  [CourseItemType.EXAM]: "",
};

const statusView = computed(() => {
  const itemRecordActionStr = itemType2ActionStrMap[item.courseItemType];
  if (!itemRecordActionStr) return null;

  let progress = 0;
  switch (item.courseItemType) {
    case CourseItemType.QUESTION:
      const questionSet = props.itemDetail as CourseQuestionSet | null;
      if (questionSet) {
        progress = ~~((questionSet.actionCount / questionSet.totalCount) * 100);
        if (progress === 0 && questionSet.actionCount > 0) progress = 1;
      }
      break;
    default:
      progress = item.studyRecord?.studyProgress || 0;
      break;
  }

  if (progress === 100) {
    return { className: "bg-emerald-1 c-emerald-7", text: "已完成" };
  } else if (progress === 0) {
    return { className: "bg-gray-1 c-gray-5", text: "未学习" };
  } else {
    return { className: "bg-amber-1 c-amber-7", text: `上次${itemRecordActionStr} ${progress}%` };
  }
});

const handleBuy = inject<() => void>("handleBuy");

const updateCurrentItem = inject<(item: CourseItem) => void>("updateCurrentItem");

const handleItemClick = () => {
  const { courseItemType, courseItemTypeId, isFree } = item;
  // 没有购买该课程，通过点击的条目是非视频类型的，return
  // 条目是视频类型,没有购买该课程，且不是免费试看，return
  if (!purchased && !isFree) {
    return handleBuy!();
  }

  updateCurrentItem!(item);
};

// 自动滚动到上次学习的位置
const eleRef = ref<HTMLElement | null>(null);
if (props.active) {
  setTimeout(() => {
    eleRef.value?.scrollIntoView({ behavior: "smooth", block: "center" });
  }, 500);
}
</script>

<template>
  <div ref="eleRef" class="flex flex-col py-2 px-3 rd-3" @click="handleItemClick">
    <div>
      <div class="flex items-start gap-3">
        <h2 class="grow w-0 text-base" :class="{ 'c-blue-6': active, 'c-gray-7': !active }">
          <span v-if="prefix" class="inline-block mr-2">{{ prefix }}</span
          >{{ item.itemName }}
        </h2>
        <span v-if="statusView" class="shrink-0 px-2 py-.5 text-xs rd-full" :class="statusView.className">{{ statusView.text }}</span>
      </div>
      <div v-if="item.itemDesc" class="mt-1 text-sm c-gray-4">{{ item.itemDesc }}</div>
    </div>

    <div class="mt-2 flex items-center gap-2">
      <!-- 项目类型 -->
      <span class="text-xs py-.5 px-2 b-1 b-gray-3 c-gray-4 rd-md">{{ typeMapper[item.courseItemType] }}</span>
      <!-- 免费试看 -->
      <span v-if="!purchased && item.isFree" class="text-xs py-.5 px-2 b-1 b-indigo-5 bg-indigo-1 c-indigo-5 rd-md">免费试学</span>
      <!-- 时长 -->
      <item-detail-info :type="item.courseItemType" :detail="itemDetail" />
    </div>
  </div>
</template>
